<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>方案规划展示</title>
    <meta name="description" content="方案规划软件">
    <!-- Bootstrap CSS -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- 字体CSS -->
    <link href="assets/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/bootstrap-select/bootstrap-select.css" rel="stylesheet" type="text/css" />
    <!-- 自定义样式 -->
    <link href="assets/css/style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="./assets/layui/css/layui.css">
    <link rel="stylesheet" href="./assets/css/scheme/index.css">
    <style>

    </style>
</head>

<body class="adminbody">
    <div id="main">
        <!-- 头部导航 -->
        <div class="headerbar">
            <!-- LOGO -->
            <div class="headerbar-left">
                <a href="index.html" class="logo">
                    <!--					<img alt="Logo" src="assets/images/logo.png" />-->
                    <span>方案规划软件</span>
                </a>
            </div>

            <nav class="navbar-custom">
                <ul class="list-inline float-right mb-0">
                    <li class="list-inline-item dropdown notif">
                        <a class="nav-link dropdown-toggle arrow-none" data-toggle="dropdown" href="#" role="button"
                            aria-haspopup="false" aria-expanded="false">
                            <i class="fa fa-fw fa-bell-o"></i><span class="notif-bullet"></span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right dropdown-arrow dropdown-lg">
                            <!-- item-->
                            <div class="dropdown-item noti-title">
                                <h5><small><span class="label label-danger pull-xs-right">1</span>消息提醒</small></h5>
                            </div>
                            <!-- item-->
                            <a href="#" class="dropdown-item notify-item">
                                <div class="notify-icon bg-faded">
                                    <img src="assets/images/avatars/avatar2.png" alt="img"
                                        class="rounded-circle img-fluid">
                                </div>
                                <p class="notify-details">
                                    <b>Admin</b>
                                    <span>用户信息注册成功</span>
                                    <small class="text-muted">3分钟前</small>
                                </p>
                            </a>
                            <!-- All-->
                            <a href="#" class="dropdown-item notify-item notify-all">
                                查看所有消息
                            </a>

                        </div>
                    </li>

                    <li class="list-inline-item dropdown notif">
                        <a class="nav-link dropdown-toggle nav-user" data-toggle="dropdown" href="#" role="button"
                            aria-haspopup="false" aria-expanded="false">
                            <img src="assets/images/avatar.jpg" alt="Profile image" class="avatar-rounded">
                        </a>
                        <div class="dropdown-menu dropdown-menu-right profile-dropdown ">
                            <!-- item-->
                            <div class="dropdown-item noti-title">
                                <h5 class="text-overflow"><small>Hello, admin</small> </h5>
                            </div>

                            <!-- item-->
                            <a href="pro-profile.html" class="dropdown-item notify-item">
                                <i class="fa fa-user"></i> <span>个人中心</span>
                            </a>

                            <!-- item-->
                            <a href="#" class="dropdown-item notify-item">
                                <i class="fa fa-power-off"></i> <span>退出</span>
                            </a>
                        </div>
                    </li>

                </ul>

                <ul class="list-inline menu-left mb-0">
                    <li class="float-left">
                        <button class="button-menu-mobile open-left">
                            <i class="fa fa-fw fa-bars"></i>
                        </button>
                    </li>
                </ul>

            </nav>

        </div>
        <!-- 头部导航End -->
        <!-- 左侧导航开始 start-->
        <div class="left main-sidebar">
            <div class="sidebar-inner leftscroll">
                <div id="sidebar-menu">
                    <ul>
                        <li class="submenu">
                            <a href="index.html" class="active"><i class="fa fa-fw fa-home"></i><span>方案规划首页</span> </a>
                        </li>
                        <li class="submenu">
                            <a href="schemePlan.html"><i class="fa fa-fw fa-check-circle-o"></i><span>资源规划</span> </a>
                        </li>
                        <li class="submenu">
                            <a href="schemeDesign.html"><i class="fa fa-fw fa-pencil-square-o"></i><span>方案设计</span> </a>
                        </li>
                        <li class="submenu">
                            <a href="schemeSource.html"><i class="fa fa-fw fa-bars"></i><span>资源管理</span> </a>
                        </li>

                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div class="clearfix"></div>

            </div>
        </div>
        <!-- End 左侧导航 -->
        <div class="content-page">
            <div id="index-main">
                <div class="index-content">
                    <div class="layui-row">
                        <div class="layui-col-xs5">
                            <div id="chart1"></div>
                        </div>
                        <div class="layui-col-xs7">
                            <div id="chart2">
                                <div class="layui-row">
                                    <div class="layui-col-xs4">
                                        <div id="chart2-1"></div>
                                    </div>
                                    <div class="layui-col-xs4">
                                        <div id="chart2-2"></div>
                                    </div>
                                    <div class="layui-col-xs4">
                                        <div id="chart2-3"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-xs3">
                            <div id="chart3"></div>
                        </div>
                        <div class="layui-col-xs3">
                            <div id="chart4"></div>
                        </div>
                        <div class="layui-col-xs6">
                            <div id="chart5"></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>


    <!-- 上述js路径需要改成你本地的 -->
    <script src="assets/js/modernizr.min.js"></script>
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/moment.min.js"></script>
    <script src="assets/js/popper.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>


    <!-- App js -->
    <script src="assets/js/detect.js"></script>
    <script src="assets/js/fastclick.js"></script>
    <script src="assets/js/jquery.blockUI.js"></script>
    <script src="assets/js/jquery.nicescroll.js"></script>
    <script src="assets/js/pikeadmin.js"></script>
    <script src="./assets/layui/layui.js"></script>
    <script src="./assets/js/echarts.min.js"></script>

    <script>
        var color = ["#2ec7c9",
            "#b6a2de",
            "#5ab1ef",
            "#ffb980",
            "#d87a80",
            "#8d98b3",
            "#e5cf0d",
            "#97b552",
            "#95706d",
            "#dc69aa",
            "#07a2a4",
            "#9a7fd1",
            "#588dd5",
            "#f5994e",
            "#c05050",
            "#59678c",
            "#c9ab00",
            "#7eb00a",
            "#6f5553",
            "#c14089"
        ]
        // createLine();

        // createPie1();
        // createPie2();
        // createBar();
        //折线图
        function createLine() {
            var myChart = echarts.init(document.getElementById('chart1'));
            $.ajax({
                //请求方式
                type: "POST",
                //请求的媒体类型
                contentType: "application/x-www-form-urlencoded", //application/x-www-form-urlencoded,application/json
                //请求地址
                url: "/bs/standardManage/getDataLine",
                //数据
                data: '',
                //请求成功
                success: function (res) {
                    if (res.status == 0) {
                        var legendArr = [],
                            seriesData = [];
                        var data = res.data;
                        for (let i of data.lists) {
                            seriesData.push({
                                name: i.name,
                                type: 'line',
                                data: i.yData
                            });
                            legendArr.push(i.name);
                        }
                        var option = {
                            title: {
                                text: data.title
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: legendArr
                            },
                            color,
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            toolbox: {
                                feature: {
                                    saveAsImage: {}
                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: data.xData
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: seriesData
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    }
                },
                //请求失败，包含具体的错误信息
                error: function (e) {
                    console.error(e.status);
                    console.error(e.responseText);
                }
            });
        }
        $.ajax({
            //请求方式
            type: "POST",
            //请求的媒体类型
            contentType: "application/x-www-form-urlencoded", //application/x-www-form-urlencoded,application/json
            //请求地址
            url: "/bs/standardManage/getDataByType",
            //数据
            data: '',
            //请求成功
            success: function (res) {
                var legendArr = [],
                    dataArr = [];
                if (res.status == 0) {
                    createCircle(res.data);
                }
            },
            //请求失败，包含具体的错误信息
            error: function (e) {
                console.error(e.status);
                console.error(e.responseText);
            }
        });
        //生成环图数据
        function circleArr(list, name) {
            var arr = [];
            for (let k of list[name]) {
                arr.push({
                    value: k.number,
                    name: k.name
                })
            }
            return arr;
        }
        //环图
        function createCircle(data) {
            var title = data.title,
                list = data.list;
            var myChart1 = echarts.init(document.getElementById('chart2-1'));
            var myChart2 = echarts.init(document.getElementById('chart2-2'));
            var myChart3 = echarts.init(document.getElementById('chart2-3'));
            var option1 = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 10,
                    data: [],
                    show: false
                },
                color,
                series: [{
                    name: title,
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: true,
                            // position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true
                        }
                    },
                    data: circleArr(list, 'category0')
                }]
            };

            var option2 = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                title: {
                    text: title
                },
                legend: {
                    orient: 'vertical',
                    left: 10,
                    top: 20,
                    data: ['准则', '模板']
                },
                color,
                series: [{
                    name: title,
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: circleArr(list, 'category1')
                }]
            };

            var option3 = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 10,
                    data: [],
                    show: false
                },
                color,
                series: [{
                    name: title,
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: circleArr(list, 'category2')
                }]
            };

            myChart1.setOption(option1);
            myChart2.setOption(option2);
            myChart3.setOption(option3);
        }
        //    饼图1
        function createPie1() {
            var myChart = echarts.init(document.getElementById('chart3'));
            $.ajax({
                //请求方式
                type: "POST",
                //请求的媒体类型
                contentType: "application/x-www-form-urlencoded", //application/x-www-form-urlencoded,application/json
                //请求地址
                url: "/bs/standardManage/getStandardByMon",
                //数据
                data: '',
                //请求成功
                success: function (res) {
                    var legendArr = [],
                        dataArr = [];
                    if (res.status == 0) {
                        for (let i of res.data.list) {
                            legendArr.push(i.category);
                            dataArr.push({
                                value: i.number,
                                name: i.category
                            });
                        }
                        var option = {
                            title: {
                                text: res.data.title,
                                subtext: '',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} <br/>{b} : {c} ({d}%)'
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left',
                                top: 26,
                                data: legendArr
                            },
                            color,
                            series: [{
                                name: '准则生成量',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                data: dataArr,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }]
                        };
                        myChart.setOption(option);
                    }
                },
                //请求失败，包含具体的错误信息
                error: function (e) {
                    console.error(e.status);
                    console.error(e.responseText);
                }
            });
        }
        //    饼图2
        function createPie2() {
            var myChart = echarts.init(document.getElementById('chart4'));
            $.ajax({
                //请求方式
                type: "POST",
                //请求的媒体类型
                contentType: "application/x-www-form-urlencoded", //application/x-www-form-urlencoded,application/json
                //请求地址
                url: "/bs/modelManage/getModelByMon",
                //数据
                data: '',
                //请求成功
                success: function (res) {
                    var legendArr = [],
                        dataArr = [];
                    if (res.status == 0) {
                        for (let i of res.data.list) {
                            legendArr.push(i.category);
                            dataArr.push({
                                value: i.number,
                                name: i.category
                            });
                        }
                        var option = {
                            title: {
                                text: res.data.title,
                                subtext: '',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} <br/>{b} : {c} ({d}%)'
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left',
                                top: 26,
                                data: legendArr
                            },
                            color,
                            series: [{
                                name: '模板生成量',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                data: dataArr,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }]
                        };
                        myChart.setOption(option);
                    }
                },
                //请求失败，包含具体的错误信息
                error: function (e) {
                    console.error(e.status);
                    console.error(e.responseText);
                }
            });
        }
        //    柱图
        function createBar() {
            var myChart = echarts.init(document.getElementById('chart5'));
            $.ajax({
                //请求方式
                type: "POST",
                //请求的媒体类型
                contentType: "application/x-www-form-urlencoded", //application/x-www-form-urlencoded,application/json
                //请求地址
                url: "/bs/standardManage/getData",
                //数据
                data: '',
                //请求成功
                success: function (res) {
                    if (res.status == 0) {
                        var legendArr = [],
                            seriesData = [];
                        var data = res.data;
                        for (let i of data.lists) {
                            seriesData.push({
                                name: i.name,
                                type: 'bar',
                                data: i.yData,
                                markPoint: {
                                    data: [{
                                            type: 'max',
                                            name: '最大值'
                                        },
                                        {
                                            type: 'min',
                                            name: '最小值'
                                        }
                                    ]
                                },
                                markLine: {
                                    data: [{
                                        type: 'average',
                                        name: '平均值'
                                    }]
                                }
                            });
                            legendArr.push(i.name);
                        }
                        var option = {
                            title: {
                                text: data.title,
                                subtext: ''
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: legendArr
                            },
                            color,
                            toolbox: {
                                show: true,
                                feature: {
                                    dataView: {
                                        show: true,
                                        readOnly: false
                                    },
                                    magicType: {
                                        show: true,
                                        type: ['line', 'bar']
                                    },
                                    restore: {
                                        show: true
                                    },
                                    saveAsImage: {
                                        show: true
                                    }
                                }
                            },
                            calculable: true,
                            xAxis: [{
                                type: 'category',
                                data: data.xData
                            }],
                            yAxis: [{
                                type: 'value'
                            }],
                            series: seriesData
                        };
                        myChart.setOption(option);
                    }
                },
                //请求失败，包含具体的错误信息
                error: function (e) {
                    console.error(e.status);
                    console.error(e.responseText);
                }
            });

        }
    </script>
</body>

</html>